<!--
/**
* Author: ganqz
* Date: 2022-07-22 16:38
* Desc: productItem 商品项
*/
-->
<template>
  <view class="product-item flex-s-m" :class="customClass">
    <!-- 左侧商品图片 -->
    <zm-image
      custom-class="product-img"
      :width="width"
      :height="height"
      mode="aspectFit"
      :src="src || info.imageUrl"
    ></zm-image>
    <!-- 右侧内容 -->
    <view class="product-content flex-col flex flex-1">
      <view class="product-content_up flex flex-col-bottom">
        <view class="part-left flex-1">
          <view class="name fb">{{ info.name }}</view>
          <view class="desc ellipsis">{{ info.description }}</view>
          <price
            :price="info.sellPrice"
            unit-size="24"
            price-size="38"
            custom-class="fb"
            color="#FFB415"
          ></price>
        </view>
        <view class="product-content_down" v-if="showBuy">
          <view class="buy-btn fc-white bc-primary">购买</view>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
  import ZmImage from '@/commons/ZmImage'
  import Price from '@/components/Price'
  export default {
    components: {
      Price,
      ZmImage
    },
    props: {
      info: {
        type: Object,
        default() {
          return {}
        }
      },
      showBuy: {
        type: Boolean,
        default: true
      },
      src: {
        type: String,
        default: ''
      },
      height: {
        type: String,
        default: ''
      },
      width: {
        type: String,
        default: ''
      },
      customClass: {
        type: String,
        default: ''
      }
    },
    data() {
      return {}
    },
    methods: {}
  }
</script>

<style lang="scss" scoped>
  .product-item {
    padding: 0 20rpx;
    background: #fff;
    border-radius: 18rpx;
    & + & {
      .product-content {
        border-top: 1rpx solid #eee;
      }
    }
    .product-img {
      width: 134rpx;
      height: 134rpx;
      background-color: #fff;
      border-radius: 12rpx;
    }
    .product-content {
      margin-left: 25rpx;
      padding: 30rpx 0;
      .product-content_up {
        .buy-btn {
          width: 110rpx;
          height: 60rpx;
          line-height: 60rpx;
          border-radius: 20rpx;
          text-align: center;
        }
        .part-left {
          width: 287rpx;
          .name {
            font-size: 30rpx;
            color: #333;
          }
          .desc {
            font-size: 24rpx;
            color: #ababab;
            // height: 61rpx;
            line-height: 38rpx;
            margin-top: 15rpx;
          }
        }
        .part-right {
          .tip {
            height: 28rpx;
            line-height: 28rpx;
            background: #ffb415;
            border-radius: 14rpx;
            font-size: 18rpx;
            color: #fff;
            padding: 0 12rpx;
          }
        }
      }
      .product-content_down {
        .label_btn {
          text-align: center;
          height: 54rpx;
          line-height: 54rpx;
          font-size: 26rpx;
          border-radius: 12rpx;
          padding: 0 13rpx;
        }
        .label_buy {
          color: #fff;
          background: linear-gradient(-90deg, #f85d08 0%, #fd550f 99%);
        }
        .label_share {
          color: #fd5f45;
          background: #ffffff;
          border: 1rpx solid #fa5a0b;
        }
      }
    }
  }
</style>
